@use "sass:map";

@import "./filters_menu";

.gear-picker-root {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .gear-picker-left,
  .gear-picker-right {
    width: 50%;
  }

  .item-picker-root {
    display: flex;

    &:not(:last-child) {
      margin-bottom: $block-spacer;
    }

    .item-picker-icon {
      @include wowhead-background-icon;
      width: 4rem;
      height: 4rem;
      border: $border-default;
    }
  }

  .gear-picker-left {
    .item-picker-root {
      flex-direction: row;
      text-align: left;
  
      // Add space to separate weapon categories
      &:nth-child(6) {
        margin-bottom: map.get($spacers, 5);
      }
    }
  }

  .gear-picker-right {
    .item-picker-root {
      flex-direction: row-reverse;
      text-align: right;
    }
  }
}

.item-picker-sockets-container {
  @include vertical-bottom;
  @include horizontal-center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.selector-modal {
  .modal-header {
    padding-bottom: 0;

    .selector-modal-tabs {
      border-bottom: 0;

      .selector-modal-tab-gem {
        height: 100%;
        padding: 0;
        padding: calc(var(--bs-nav-link-padding-y) / 2) calc(var(--bs-nav-link-padding-x) / 2);
        margin-left: calc(var(--bs-nav-link-padding-x) / 2);
        margin-right: calc(var(--bs-nav-link-padding-x) / -2);
        display: flex;
        align-items: center;
        opacity: .7;
        transition: opacity .15s ease-in-out;

        &:hover, &.active {
          opacity: 1;
        }

        .gem-socket-container {
          --gem-width: 2rem;
        }
      }
    }
  }
}

@include media-breakpoint-down(xl) {
  .gear-picker-right {
    margin-bottom: 2 * map.get($spacers, 3);
  }
}

@include media-breakpoint-down(md) {
  .gear-picker-root {
    .gear-picker-left {
      .item-picker-root:last-child {
        margin-bottom: map.get($spacers, 5);
      }
    }

    .gear-picker-right {
      .item-picker-root {
        flex-direction: row;
        text-align: left;
      }
    }
  }
}

.item-picker-labels-container {
  padding: map.get($spacers, 2);
  flex: 1;

  .item-picker-name {
    color: white;
    font-size: map.get($font-sizes, 6);
    letter-spacing: normal;
  }
  
  .item-picker-enchant {
    color: $item-quality-uncommon;
    font-size: $content-font-size;
    letter-spacing: normal;
  }
}

@include media-breakpoint-down(md) {
  .gear-picker-root {
    .gear-picker-left {
      .item-picker-root:last-child {
        margin-bottom: map.get($spacers, 5);
      }
    }

    .gear-picker-right {
      .item-picker-root {
        flex-direction: row;
        text-align: left;
      }
    }
  }
}

.item-picker-labels-container {
  padding: map.get($spacers, 2);
  flex: 1;

  .item-picker-name {
    color: white;
    font-size: map.get($font-sizes, 6);
    letter-spacing: normal;
  }
  
  .item-picker-enchant {
    color: $item-quality-uncommon;
    font-size: $content-font-size;
    letter-spacing: normal;
  }
}

.selector-modal-tab-content {
  .selector-modal-tab-pane {
    padding: 0;
  
    .selector-modal-filters {
      margin-bottom: map.get($spacers, 3);
      display: flex;
      align-items: center;

      &> *:not(:last-child) {
        margin-right: map.get($spacers, 2);
      }

      input, select {
        padding-top: $btn-padding-y;
        padding-bottom: $btn-padding-y;
        font-size: $btn-font-size;
      }
    }
  }
}

.selector-modal-search {
	max-width: 12rem;
}

.selector-modal-phase-selector {
  min-width: 7rem;

  .phase-selector {
    margin-bottom: 0;
  }
}

.selector-modal-remove-button {
  margin-left: auto;
}

.selector-modal-list-labels {
  margin-bottom: map-get($spacers, 2);
  font-size: 1.125rem;

  .ep-delta-label {
    display: flex;
    align-items: center;
    float: right;
  }
}

.selector-modal-list {
  width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
  padding: 0;
  
  &.hide-ep {
    .selector-modal-list-item-ep {
      display:none;
    }
  }
}

// TODO: Move all of these to a shared file, as they're used in other places too
.selector-modal-list-item {
  padding: .5rem;
  display: flex;
  align-items: center;
	background-color: #111218;

  &:nth-child(2n) {
    background: $table-row-even-bg;
  }

  &:nth-child(2n+1) {
    background: $table-row-odd-bg;
  }

  &:hover {
    background: #333;
  }

  &.active {
    .selector-modal-list-item-icon {
      outline: 2px solid $success;
    }
  }

  .selector-modal-list-item-link {
    display: flex;
    align-items: center;
  }
  
  .selector-modal-list-label-cell {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .selector-modal-list-item-icon {
    @include wowhead-background-icon;
    width: 3rem;
    height: 3rem;
    border: $border-default;
  }
  
  .selector-modal-list-item-name {
    font-size: 1.125rem;
    margin-left: map-get($spacers, 3);
    letter-spacing: normal;
    font-weight: normal;
    cursor: pointer;
  }
}

.selector-modal-list-item-source-container {
	margin-left: map-get($spacers, 3);
	width: 12rem;
}

.selector-modal-list-item-favorite {
	margin-left: map-get($spacers, 3);
	color: yellow;
}

.selector-modal-list-item-favorite:hover {
	text-shadow:
		0 0 10px white,
		0 0 10px white;
}

.selector-modal-list-item-ep {
	display: flex;
	font-size: 1rem;
	font-weight: 800;
}

.selector-modal-list-item-ep > span {
	min-width: 3rem;
  display: inline-block;
	color: white;
	text-align: right;
}

.heroic-label {
  margin-left: map-get($spacers, 1);
  color: $item-quality-uncommon;  
}

@include media-breakpoint-down(lg) {
  .item-picker-icon {
    width: 3rem;
    height: 3rem;
  }
}
